<template>
  <div class="add-special-case-form">
    <a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="案例名称" name="name">
            <a-input v-model:value="form.name" placeholder="请输入案例名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="情况类型" name="caseType">
            <a-select v-model:value="form.caseType" placeholder="选择情况类型">
              <a-select-option value="accident">意外死亡</a-select-option>
              <a-select-option value="disaster">自然灾害</a-select-option>
              <a-select-option value="war">战争伤亡</a-select-option>
              <a-select-option value="plague">瘟疫死亡</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="严重程度" name="severity">
            <a-select v-model:value="form.severity" placeholder="选择严重程度">
              <a-select-option value="轻微">轻微</a-select-option>
              <a-select-option value="中等">中等</a-select-option>
              <a-select-option value="严重">严重</a-select-option>
              <a-select-option value="特重大">特重大</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="受影响区域" name="affectedArea">
            <a-input v-model:value="form.affectedArea" placeholder="请输入受影响区域" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="估计受害者人数" name="estimatedVictims">
            <a-input-number v-model:value="form.estimatedVictims" :min="1" :max="100000" placeholder="受害者人数" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="调查状态" name="investigationStatus">
            <a-select v-model:value="form.investigationStatus" placeholder="选择调查状态">
              <a-select-option value="进行中">进行中</a-select-option>
              <a-select-option value="已完成">已完成</a-select-option>
              <a-select-option value="待审核">待审核</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="应对措施" name="responseActions">
        <a-select v-model:value="form.responseActions" placeholder="选择应对措施">
          <a-select-option value="已启动应急预案">已启动应急预案</a-select-option>
          <a-select-option value="救援队伍已到位">救援队伍已到位</a-select-option>
          <a-select-option value="医疗救助进行中">医疗救助进行中</a-select-option>
          <a-select-option value="善后工作处理中">善后工作处理中</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="详细描述">
        <a-textarea v-model:value="form.description" placeholder="请详细描述情况" :rows="4" />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit" :loading="submitting"> 提交 </a-button>
          <a-button @click="handleCancel"> 取消 </a-button>
          <a-button @click="handleReset"> 重置 </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useLifeDeathStore } from '@/stores/lifeDeath'

const emit = defineEmits(['success', 'cancel'])

const lifeDeathStore = useLifeDeathStore()
const formRef = ref()
const submitting = ref(false)

const form = reactive({
  name: '',
  caseType: '',
  severity: '',
  affectedArea: '',
  estimatedVictims: 1,
  investigationStatus: '进行中',
  responseActions: '',
  description: ''
})

const rules = {
  name: [{ required: true, message: '请输入案例名称' }],
  caseType: [{ required: true, message: '请选择情况类型' }],
  severity: [{ required: true, message: '请选择严重程度' }],
  affectedArea: [{ required: true, message: '请输入受影响区域' }],
  estimatedVictims: [{ required: true, message: '请输入受害者人数' }],
  investigationStatus: [{ required: true, message: '请选择调查状态' }],
  responseActions: [{ required: true, message: '请选择应对措施' }]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true

    await lifeDeathStore.addSpecialCase(form)
    emit('success')
  } catch (error) {
    if (error.message) {
      message.error(error.message)
    }
  } finally {
    submitting.value = false
  }
}

const handleCancel = () => {
  emit('cancel')
}

const handleReset = () => {
  formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.add-special-case-form {
  padding: 16px;
  color: $text-primary;
}
</style>
